<template>
	
	<view class="body">
		<!-- <view class="top">
		</view> -->
		<!-- scroll-view来实现页面拖动 -->
		<!--注意加-->
		<scroll-view :scroll-into-view="childrenId" scroll-y="true" class="scroll">
			<view  v-for="(item,index) in arr"  :key="index" :id="'id'+index">
				<view class="show">
					<view v-show="whoSend[index]===0">
						<!-- 为什么不显示方形呢 -->
						<image :src="srcs" mode="square" class="ava"></image>
					</view>
					<view class="box2" v-show="whoSend[index]===0">
						<text >{{item}}<!-- {{childrenId}}{{"id"+index}} --></text>
					</view/>
				</view>
				<view class="replyShow">
					<view v-show="whoSend[index]===1">
						<image :src="src" mode="square" class="opoAva"></image>
					</view>
					<view class="box1" v-show="whoSend[index]===1">
						<text >{{item}}</text>
					</view>
				</view>
				
			</view>
			
			
				
		</scroll-view>
		
		<view class="under">
			<view class="inputframe">
				<textarea type="text" v-model="text" placeholder="请输入" class="input"></textarea>
			</view>
			
			<view class="button">
<!-- 				<button @click="sendMessage()"  class="understyle" >
					发送
					</button> -->
				<u-button type="info" text="发送"  @click="sendMessage()"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				text:'',
				arr:[],
				childrenId:"",
				srcs:null,
				src:null,
				timeout: 30000, // 30s
				timeoutObj: null,
				reData:null,
				isReply:false,
				whoSend:[],//0是自己 1是对方
			}
		},
		onLoad(options) {
			
			var detail = JSON.parse(decodeURIComponent(options.item));
			console.log(detail.srcs);
			this.src = detail.srcs;
			// .判断是否已连接
			this.checkOpenSocket();
		},
		mounted(){
			var _this=this;
			uni.getStorage({
				key:'user',
				success:(res)=>{
					
					_this.srcs = res.data.userInfo.avatarUrl;
					console.log(_this.srcs);
				}
			})
		},
		beforeDestroy() {
			uni.closeSocket();
		},
		methods:{
			// 判断是否已连接
			checkOpenSocket() {
				uni.sendSocketMessage({
					data: 'ping',
					success: res => {
						return;
					},
					fail: err => {
						// 未连接打开websocket连接
						this.openConnection();
					}
				});
			},
			openConnection() {
				// 打开连接
				// uni.closeSocket(); // 确保已经关闭后再重新打开
				uni.getStorage({
					key:"user",
					success: (res) => {
						var _this=this;
						var openId = res.data.openId
						uni.connectSocket({
							url:`wss://wrlg.xyz/chat/${openId}`,//服务器端口
							
							data(){
								return{
									toOpenId:'123',
									contentText:'hello'
								}
							},
							success(res) {
								//console.log('连接成功 connectSocket=', res);
							},
							fail(err) {
								//console.log('连接失败 connectSocket=', err);
							}
						})
					}
				})
				uni.onSocketOpen(res => {
					//console.log('连接成功');
				});
				this.onSocketMessage(); // 打开成功监听服务器返回的消息
			},
			//	打开成功监听服务器返回的消息
			onSocketMessage() {
				// 消息
				this.timeout = 30000;
				this.timeoutObj = null;
				uni.onSocketMessage(res => {
					//console.log(res)
					this.getSocketMsg(res.data); // 监听到有新服务器消息
				});
			},
			// 监听到有新服务器消息
			getSocketMsg(reData) {
				// 监听到服务器消息
				this.reData = reData;
				
				if(reData != "连接成功")
				{
					
					this.whoSend.push(1);
					this.reData=JSON.parse(reData).contentText;
					this.arr.push(this.reData);
					let len=this.arr.length;
					this.childrenId='id'+(len-1);
					console.log("childrenId"+this.childrenId);
					this.isReply=true;
					console.log('收到服务器消息', reData);
					console.log('解析到的数据',JSON.parse(reData).contentText);
				}
				
				this.reset();  // 检测心跳reset,防止长时间连接导致连接关闭
			},
			// 检测心跳reset
			reset() {
				this.isReply=false;
				clearInterval(this.timeoutObj);
				this.start(); // 启动心跳
			},
			// 启动心跳 start
			test(){
				uni.sendSocketMessage({
					data: 'ping',
					success: res => {
						//console.log('连接中....');
					},
					fail: err => {
						//console.log('连接失败重新连接....');
						console.log('timeout:'+this.timeout);
						this.openConnection();
					}
				});
			},
			start() {
				this.timeoutObj = setInterval(this.test, this.timeout);
			},
					
			sendMessage(){
				// uni.sendSocketMessage({
				// 	data:this.text
				// });
				console.log(this.text);
				this.arr.push(this.text);
				this.text='';
				this.whoSend.push(0);
				let len=this.arr.length;
				this.childrenId='id'+(len-1);
				console.log("childrenId"+this.childrenId);
				//console.log("is_open_socket:"+this.is_open_socket);
			},
		}
	}
</script>

<style scoped lang="scss">
	.top{
		width: 100%;
		height: 100upx;
		background-color: #000000;
	}
	.replyShow{
		display:flex;
		flex-direction: row;
		.opoAva{
			width: 100upx;
			height: 100upx;
			margin-left: 50upx;
			margin-top: 50upx;
		}
		.box1{
			border:solid 1px #ddd;
			background-color:whitesmoke;
			border-radius: 15upx;
			text-align: left;
			padding:10px;
			box-sizing: content-box;
			margin-bottom: 2%;
			margin-left: 30upx;
			margin-top: 8%;
			
		}
	}
	
	.body{
		font-family:"Hiragino Sans GB","PingFang SC";
		.inputframe{
			// background-color: #2979FF;
			height: 40upx;
			width: 80%;
		}
		.ava{
			width: 100upx;
			height: 100upx;
			margin-right: 50upx;
			margin-top: 50upx;
		}
	}
	.scroll{
		height:calc(100vh - 81px;);
	}
	.under{
		width:100%;
		display:flex;
		flex-direction: row;
		position:fixed;
		bottom:0;
		height: 80px;
		border:solid 1px #ddd;
		margin:0px;
		display: flex;
		
	}
	.input{
		width:75%;
		background-color:#dedede;
		height: 60upx;
		box-sizing: border-box;
		padding-top: 2%;
		padding-left: 4%;
		border-radius: 15upx;
		// font-size: 20px;
		margin-top: 6%;
		margin-left:15%;
	}
	.button{
		width: 20%;
		margin-top: 4%;
		margin-left: -20px;
	}
	.understyle::after{
		
	}
	.understyle{
		line-height: 32px;
		width: 120upx;
		text-align: center;
	}
	.show{
		font-size:15px;
		display:flex;
		flex-direction: row-reverse;
		width:100%;
		margin-top: 0px;
	}
	.box2{
		border:solid 1px #ddd;
		background-color:#8DC63F;
		border-radius: 15upx;
		text-align: left;
		padding:10px;
		box-sizing: content-box;
		margin-bottom: 2%;
		margin-right: 30upx;
		margin-top: 8%;
		
	}
	
</style>

